<template>
   <el-card>
     <div slot="header" class="header">
            <div class="category-header">
                <span>销售额类别占比</span>
                <el-radio-group v-model="value">
                    <el-radio-button label="全部渠道"></el-radio-button>
                    <el-radio-button label="线上"></el-radio-button>
                    <el-radio-button label="门店"></el-radio-button>
                </el-radio-group>
            </div>
       </div>
       <div>
           <div class="charts" ref="charts"></div>
       </div>
   </el-card>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'index',
  data(){
      return{
          value:'全部渠道' 
      }
  },
  mounted(){
        //饼图
        let mychart = echarts.init(this.$refs.charts);
        mychart.setOption({
        title: {
            text: "视频",
            subtext: 1048,
            left: "center",
            top: "center",
        },
        tooltip: {
            trigger: "item",
        },
        series: [
            {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 2,
                borderColor: "#fff",
                borderWidth: 2,
            },
            label: {
                show: true,
                position: "outsize",
            },
            labelLine: {
                show: true,
            },
            data: [
                { value: 1048, name: "视频" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
            ],
            },
          ],
        });
         //绑定事件
        mychart.on("mouseover",(params)=>{
            //获取鼠标移上去那条数据
            const {name,value} = params.data;
            //重新设置标题
            mychart.setOption({
            title:{
                text:name,
                subtext:'value'
            }
            })
        });
   },
}
</script>

<style  scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header {
  border-bottom: 1px solid #eee;
}
.charts {
  width: 100%;
  height: 300px;
}

</style>
